<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Metrics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere !">
    <meta name="author" content="lowlighter">
    <meta property="og:image" content="/.opengraph.png">
    <link rel="icon" href="/.favicon.png">
    <link rel="stylesheet" href="/.css/style.vars.css?v=3.34">
    <link rel="stylesheet" href="/.css/style.css?v=3.34">
  </head>
  <body>
    <!-- Vue app -->
    <main :class="[palette]">
      <template>

        <header :class="{beta}">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
          <a href="/">Metrics {{ version }}</a>
          <div class="grow"></div>
          <a class="oauth-github" :href="`/.oauth?${params}`" v-if="oauth">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
            <template v-if="requests.login">
              Signed in as {{ requests.login }}
            </template>
            <template v-else>
              Sign in with GitHub
            </template>
          </a>
        </header>

        <section class="container" v-if="modes.includes('embed')">
          <div class="search app">
            <div class="about">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.134 1.535C9.722 2.562 8.16 4.057 6.889 5.312 5.8 6.387 5.041 7.401 4.575 8.294a3.745 3.745 0 00-3.227 1.054c-.43.431-.69 1.066-.86 1.657a11.982 11.982 0 00-.358 1.914A21.263 21.263 0 000 15.203v.054l.75-.007-.007.75h.054a14.404 14.404 0 00.654-.012 21.243 21.243 0 001.63-.118c.62-.07 1.3-.18 1.914-.357.592-.17 1.226-.43 1.657-.861a3.745 3.745 0 001.055-3.217c.908-.461 1.942-1.216 3.04-2.3 1.279-1.262 2.764-2.825 3.775-4.249.501-.706.923-1.428 1.125-2.096.2-.659.235-1.469-.368-2.07-.606-.607-1.42-.55-2.069-.34-.66.213-1.376.646-2.076 1.155zm-3.95 8.48a3.76 3.76 0 00-1.19-1.192 9.758 9.758 0 011.161-1.607l1.658 1.658a9.853 9.853 0 01-1.63 1.142zM.742 16l.007-.75-.75.008A.75.75 0 00.743 16zM12.016 2.749c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833.47-.662.78-1.227.912-1.662.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.112-.113-.548.027-.432.14-.995.462-1.655.942zM1.62 13.089a19.56 19.56 0 00-.104 1.395 19.55 19.55 0 001.396-.104 10.528 10.528 0 001.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 00-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 00-.309 1.67z"></path></svg>
                Create your own metrics
              </h2>
              <small>
                Choose among dozens of plugins and hundreds of options to craft your own custom metrics infographics. Preview renders and auto-generate a configuration file!
              </small>
            </div>
            <div class="inputs">
              <input type="text" v-model="user2" @keyup.enter="embed">
              <button @click="embed">
                Let's start!
              </button>
            </div>
          </div>
        </section>

        <section class="container" v-if="modes.includes('insights')">
          <div class="search app">
            <div class="about">
              <h2>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
                Search a GitHub user
              </h2>
              <small>
                Display rankings, highlights, contributions, repositories, user reactions, stars, commits history, used languages and recent activity from any user account!
              </small>
            </div>
            <div class="inputs">
              <input type="text" v-model="user1" @keyup.enter="insights">
              <button @click="insights">
                Search user!
              </button>
            </div>
          </div>
        </section>

        <section class="container">
          <div class="search">
            <div class="about">
              <small class="warning mb1" v-if="preview">
                Metrics are rendered by <a href="https://metrics.lecoq.io/">metrics.lecoq.io</a> in preview mode.<br>
                Any backend changes won't be reflected but client-side rendering can still be tested.
              </small>
              <div class="warning mb1" v-if="(!requests.rest.remaining)||(!requests.graphql.remaining)">
                This web instance has run out of GitHub API requests.
                Please wait until {{ rlreset }} to generate metrics again.
              </div>
              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests<span v-if="requests.login"> for {{ requests.login }}</span>: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL / {{ requests.search.remaining }} search</small>
              <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions" target="_blank">GitHub discussions</a>!</small>
            </div>
          </div>
        </section>

        <footer>
          <a href="https://github.com/lowlighter/metrics">Repository</a>
          <a href="https://github.com/lowlighter/metrics/blob/master/LICENSE">License</a>
          <a href="https://github.com/marketplace/actions/metrics-embed">GitHub Action</a>
          <span v-if="hosted">Hosted with ❤️ by <a :href="hosted.link">{{ hosted.by }}</a></span>
        </footer>

      </template>
    </main>
    <!-- Scripts -->
    <script src="/.js/axios.min.js"></script>
    <script src="/.js/vue.min.js"></script>
    <script src="/.js/app.js?v=3.34"></script>
  </body>
</html>